<template>
  <div class="kuai">
    <!-- 顶部搜索 -->
    <div class="ktop">
      <div class="pss">
        <input type="text" placeholder="请输入商品名称" />
        <div class="pfdj">
            <img :src="SMDataURL+'/images/pppss.png'">
        </div>
      </div>
      <div class="rpaixu" @click="paixu">
          <div class="rpxu">
              <span>{{arr[key].name}}</span>
              <span>▼</span>
          </div>
          <div class="xiaka" v-if="paixu1">
              <div class="axll" v-for="(item,index) in arr" :key="
              index" :data-set='index'>{{item.name}}</div>
          </div>
      </div>
    </div>
    <!-- 顶部搜索 -->
    <!-- 商品分类 -->
 <div class="pcont">
            <div class="pjd" v-for="(item,index) in typeinfo" :key="index" @click="toxr(item.name)">
                <img :src="item.photo">
                <span>{{item.productTypeName}}</span>
            </div>
        </div>
    <!-- 商品分类 -->
  </div>
</template>

<script>
import {gettpye} from "../api/spell.js"; // 导入api
export default {
  data() {
    return {
      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
      arr: [
        { name: "综合排序" },
        { name: "拼中商品比例" },
        { name: "拼中红包比例" },
        { name: "开团数量" },
        { name: "红包金额" },
      ],
      typeinfo:[],
      photo:'',
      productTypeName:'',
      // arr1: [
      //   { name: "平台推荐" },
      //   { name: "玩具" },
      //   { name: "数码家电" },
      //   { name: "休闲零食" },
      //   { name: "个人护理" },
      //   { name: "纸品清洁" },
      //   { name: "美妆护肤" },
      // ],

      key: 1,
      paixu1: false,
    };
    
  },
  created(){
    gettpye({
      companyId:-7,
      typeId:1,
      sField:"sort",
      sOrder:"asc"
    }).then(res=>{
       res.data.splice(0,1)
        this.typeinfo=res.data
         console.log(this.typeinfo,"首页的分类数据")
    })
  },
  
  methods: {
    paixu(e) {
      if (e.target.dataset.set) {
        this.key = e.target.dataset.set;
      }
      this.paixu1 = !this.paixu1;
    },
  },
};
</script>

<style scoped>
/* 顶部搜索 */
.ktop {
  padding: 0 10px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
}
.pss {
  width: 55%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 14px;
}
.pss > input {
  width: 70%;
  margin-left: 10px;
  border: none;
  outline: none;
}
.pfdj {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 30px;
}
.pfdj > img {
  width: 20px;
  height: 20px;
}
.rpaixu {
  width: 35%;
  position: relative;
  color: #999999;
  background: white;
  border-radius: 4px;
}
.rpxu {
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  border: 1px solid #e5e5e5;
}
.xiaka {
  width: 98%;
  display: flex;
  border-radius: 2px;
  flex-direction: column;
  background: white;
  position: absolute;
  top: 31px;
  left: 0;
  border: 1px solid #e5e5e5;
  z-index: 100;
}
.axll {
  margin: 5px;
}
/* 顶部搜索 */
/* 商品分类 */
.pcont {
  width: 96%;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  align-items: center;
  height: 70px;
  overflow-x: auto;
}
.pjd {
  width: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  color: #333333;
  margin: 0 4px;
  flex-shrink: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0);
}
.pjd > img {
  width: 35px;
  height: 35px;
  margin-bottom: 6px;
}
/* 商品分类 */
</style>